<template>
    <div>
        <!--未加载内容-->
        <div v-if="ToLoad">
            <a-spin tip="数据加载中，请稍等...">
                <div class="spin-content">
                </div>
            </a-spin>
        </div>

        <!--table表格-->
        <div v-else>
            <div style="margin-bottom: 30px">
                <a-form  :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
                    <a-form-item label="充值用户">
                        <a-input v-model:value="formState.user_name"/>
                    </a-form-item>
                        <a-form-item label="开始时间">
                            <a-date-picker format="YYYY-MM-DD" v-model:value="formState.start_time"/>
                        </a-form-item>
                    <a-form-item label="结束时间">
                        <a-date-picker format="YYYY-MM-DD" v-model:value="formState.end_time"/>
                       <!-- <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />-->
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="_search">搜索</a-button>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
                        <a-button type="danger" @click="daochu">导出数据</a-button>
                    </a-form-item>
                </a-form>
            </div>
        <table class="table" id="tableData" cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <th>充值用户</th>
                <th>充值方式</th>
                <th>充值金额</th>
                <th>状态</th>
                <th>时间</th>
            </tr>
            </tbody>
            <tbody >
            <tr v-for="(item,index) in chongZhiData" :key="index">
                <td>
                    <span v-if="item.users">
                        {{item.users.user_name}}
                    </span>

                </td>
                <td>{{item.type}}</td>
                <td>{{item.money}}</td>
                <td>
                    <span style="color:green;" v-if="item.status == 1">
                     充值成功
                    </span>
                    <span style="color:#CC3333;" v-if="item.status == 0">
                     充值失败
                    </span>
                </td>
                <td>{{item.create_time}}</td>
            </tr>
            </tbody>
        </table>

<!--分页-->
        <div style="margin-top: 20px;">
            <a-pagination
              :pageSize="formState.pageSize"
              :current="formState.page"
              :total="formState.count"
              @change="clickPage"
              :pageSizeOptions="pageSizeOptions"
              show-size-changer
              @showSizeChange="onShowSizeChange"
              show-quick-jumper
            />
        </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import apiUser from '../api/user.js'
    /*导出*/
    import FileSaver from 'file-saver'
    import * as XLSX from 'xlsx'
    export default {
        data(){
            return{
                pageSizeOptions: ['20', '30', '50', '100', '150'],
                checked:false,
                /*充值记录数据*/
                chongZhiData:'',
                /*数据加载*/
                ToLoad:true,
                /*form表单*/
                formState:{
                    page:1,
                    user_name:'',
                    start_time:'',
                    end_time:'',
                    /*分页 */
                    pageSize:20,
                    pageSum:'',
                    count:'',
                },
                labelCol: {span: 8},
                wrapperCol: {span: 14},
            }
        },
        mounted(){
            this.rechargeData();
         /*   this.chognhiCount();*/
        },
        methods:{
            daochu() {
                var xlsxParam = {raw: true}
                var wb = XLSX.utils.table_to_book(
                  document.querySelector('#tableData'),
                  xlsxParam
                )
                var wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: true,
                    type: 'array',
                })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '充值数据.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') {
                        console.log(e, wbout)
                    }
                }
            },

            moment,
            rechargeData(){
                apiUser.usergetList(this.formState).then((res) => {
                    if (this.chongZhiData !== []){
                        this.ToLoad = false
                    }
                    this.chongZhiData = res.result.data;
                    this.formState.count = res.result.count;
                })
            },
            /*搜索查询*/
            _search(){
          /*      console.log(123456);*/
                apiUser.usergetListOrder(this.formState).then((res) =>{
                    this.chongZhiData = res.result.data;
                    this.formState.count = res.result.count
                })
            },
            clickPage(e){
                this.formState.page = e;
                this.rechargeData();
            },
            onShowSizeChange(current, pageSize) {
                this.formState.pageSize = pageSize;
                this.formState.page = 1;
                this.rechargeData();
            },
        }
    }
</script>

<style>

</style>
